<template>
  <div>
    <div class="tree-box">
      <el-tree
        :data="treeListData"
        show-checkbox
        node-key="id"
        @check="handleCheckChange"
        :props="defaultProps"
        :default-expanded-keys="defaultCheckedKeysList"
        :default-checked-keys="defaultCheckedKeysList"
        check-on-click-node
      />
    </div>
    <div class="btn-group-box">
      <div class="btn-right-box">
        <span class="cancel" @click="handleBack">返回</span>
        <span class="submit" @click="handleUpdate">确认</span>
      </div>
      <span class="total"></span>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { printerSettingDetail, updatePrinterSetting } from '@/api/computer'
import { isEmpty } from '@/utils/toolsValidate'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const treeListData = ref([])
const defaultProps = reactive({ children: 'children', label: 'label' })
const originSettingList = ref([])
const defaultCheckedKeysList = ref([])

onMounted(() => { getPrinterSettingDetail() })

function handleCheckChange(data, checked, indeterminate) {
  if (checked.checkedKeys.includes(data.id)) {
    const updateItem = data
    originSettingList.value.forEach(item => {
      if (!Object.keys(updateItem).includes('children')) {
        if (item.id === updateItem.id) {
          if (!isEmpty(item?.foodList)) item.foodList.forEach(c => { c.check = 1 })
          if (!isEmpty(item?.subList)) item.subList.forEach(c => { c.foodList.forEach(f => { f.check = 1 }) })
          return
        }
        if (!isEmpty(item?.foodList)) item.foodList.forEach(food => { if (food.id === updateItem.id) food.check = 1 })
        if (!isEmpty(item?.subList)) item.subList.forEach(sub => { sub.foodList.forEach(food => { if (food.id === updateItem.id) food.check = 1 }) })
        return
      }
      if (Object.keys(updateItem).includes('children')) {
        if (!isEmpty(item?.foodList) && item.foodList.find(val => val.id === updateItem.id)) {
          item.foodList.forEach(f => { if (updateItem.id === f.id) f.check = 1 })
          return
        }
        if (!isEmpty(item?.subList) && item.subList.find(val => val.id === updateItem.id)) {
          item.subList.forEach(c => { c.foodList.forEach(f => { updateItem.children.forEach(u => { if (u.id === f.id) f.check = 1 }) }) })
          return
        }
        if (!isEmpty(item?.foodList)) {
          item.foodList.forEach(food => {
            updateItem.children.forEach(c1 => {
              if (c1.id === food.id) { food.check = 1; return }
              if (Object.keys(c1).includes('children')) {
                c1.children.forEach(c2 => {
                  if (c2.id === food.id) { food.check = 1; return }
                  if (Object.keys(c2).includes('children')) {
                    c2.children.forEach(c3 => { if (c3.id === food.id) food.check = 1 })
                  }
                })
              }
            })
          })
        }
        if (!isEmpty(item?.subList)) {
          item.subList.forEach(sub => {
            sub.foodList.forEach(food => {
              updateItem.children.forEach(c1 => {
                if (food.id === c1.id) { food.check = 1; return }
                if (Object.keys(c1).includes('children')) {
                  c1.children.forEach(c2 => {
                    if (food.id === c2.id) { food.check = 1; return }
                    if (Object.keys(c2).includes('children')) {
                      c2.children.forEach(c3 => { if (food.id === c3.id) food.check = 1 })
                    }
                  })
                }
              })
            })
          })
        }
      }
    })
  } else {
    const updateItem = data
    originSettingList.value.forEach(item => {
      if (!Object.keys(updateItem).includes('children')) {
        if (item.id === updateItem.id) {
          if (!isEmpty(item.foodList)) item.foodList.forEach(c => { c.check = 0 })
          if (!isEmpty(item.subList)) item.subList.forEach(c => { c.foodList.forEach(f => { f.check = 0 }) })
          return
        }
        if (!isEmpty(item?.foodList)) item.foodList.forEach(food => { if (food.id === updateItem.id) food.check = 0 })
        if (!isEmpty(item?.subList)) item.subList.forEach(sub => { sub.foodList.forEach(food => { if (food.id === updateItem.id) food.check = 0 }) })
        return
      }
      if (Object.keys(updateItem).includes('children')) {
        if (!isEmpty(item.foodList) && item.foodList.find(val => val.id === updateItem.id)) {
          item.foodList.forEach(f => { if (updateItem.id === f.id) f.check = 0 })
          return
        }
        if (!isEmpty(item.subList) && item.subList.find(val => val.id === updateItem.id)) {
          item.subList.forEach(c => { c.foodList.forEach(f => { updateItem.children.forEach(u => { if (u.id === f.id) f.check = 0 }) }) })
          return
        }
        if (!isEmpty(item?.foodList)) {
          item.foodList.forEach(food => {
            updateItem.children.forEach(c1 => {
              if (c1.id === food.id) { food.check = 0; return }
              if (Object.keys(c1).includes('children')) {
                c1.children.forEach(c2 => {
                  if (c2.id === food.id) { food.check = 0; return }
                  if (Object.keys(c2).includes('children')) {
                    c2.children.forEach(c3 => { if (c3.id === food.id) food.check = 0 })
                  }
                })
              }
            })
          })
        }
        if (!isEmpty(item?.subList)) {
          item.subList.forEach(sub => {
            sub.foodList.forEach(food => {
              updateItem.children.forEach(c1 => {
                if (food.id === c1.id) { food.check = 0; return }
                if (Object.keys(c1).includes('children')) {
                  c1.children.forEach(c2 => {
                    if (food.id === c2.id) { food.check = 0; return }
                    if (Object.keys(c2).includes('children')) {
                      c2.children.forEach(c3 => { if (food.id === c3.id) food.check = 0 })
                    }
                  })
                }
              })
            })
          })
        }
      }
    })
  }
}

function handleUpdate() {
  const datas = { printer_id: route.query.printer_id, key: 'food', values: originSettingList.value }
  updatePrinterSetting(datas).then(res => {
    if (res.status === 200) {
      ElMessage.success('更新设置成功')
      defaultCheckedKeysList.value = []
      getPrinterSettingDetail()
    }
  })
}

function handleBack() { router.back() }

function getPrinterSettingDetail() {
  printerSettingDetail({ key: 'food', printer_id: route.query.printer_id }).then(res => {
    if (res.status === 200) {
      const dataList = []
      const resDataList = res?.data?.setting || []
      originSettingList.value = resDataList
      resDataList.forEach(item => {
        if (!isEmpty(item?.subList)) {
          const subListData = item.subList.map(sub => {
            const childrenData = []
            sub.foodList.forEach(food => {
              if (food.check == 1) defaultCheckedKeysList.value.push(food.id)
              childrenData.push({ id: food.id, label: food.name })
            })
            return { id: sub.id, label: sub.name, children: childrenData }
          })
          dataList.push({ id: item.id, label: item.name, children: subListData })
        } else {
          let foodListData = []
          if (!isEmpty(item.foodList)) {
            foodListData = item.foodList.map(it => {
              if (it.check === 1) defaultCheckedKeysList.value.push(it.id)
              return { id: it.id, label: it.name }
            })
          }
          dataList.push({ id: item.id, label: item.name, children: foodListData })
        }
      })
      treeListData.value = [{ label: '全部', id: '0', children: dataList }]
    }
  })
}
</script>

<style lang="scss" scoped>
.tree-box { height: 700px; overflow-y: auto; box-sizing: border-box; padding: 40px 0 0 30px; }
.btn-group-box { display: flex; justify-content: space-between; padding: 60px 30px 30px 60px; box-sizing: border-box; align-items: center; }
.btn-group-box .total { font-size: 14px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; color: #333333; }
.btn-group-box .btn-right-box { display: flex; }
.btn-group-box .btn-right-box .cancel { width: 98px; height: 50px; background: #ffffff; border: 1px solid #333333; border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 18px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; color: #333333; margin-right: 40px; cursor: pointer; }
.btn-group-box .btn-right-box .submit { width: 336px; height: 52px; background: #7c0a03; border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 18px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; color: #ffffff; cursor: pointer; }
</style>
